<template>
	<div class="content-box">
		<Row>
            <i-col span="24">
                <user-bar></user-bar>
            </i-col>
		</Row>
		<br/>
		<Row  type="flex"  justify="center">
			<i-col span="23">

                <portlet name='自然人三要素比对'>
                <div class="data_body">
                	<i-form :model='formItem'>
        				<Row>
        					<i-col :xs="6" :sm="6" :md="5" :lg="4">
	        					<Form-item label="姓名"  :label-width="40">
						            <i-input :value.sync="formItem.name" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    
						    <i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="身份证"  :label-width="80">
						            <i-input :value.sync="formItem.ID" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="6">
	        					<Form-item label="手机号码"  :label-width="80">
						            <input type='file' id='photo'></input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="3" :sm="3" :md="3" :lg="3">
						    	<Form-item :label-width="14">
								    <i-button @click="upload" type="primary">查询</i-button>
								</Form-item>
						    </i-col>
        				</Row>
        				<Row>
        					<i-table :columns="columns1" :data="data1"></i-table>
        				</Row>	
                	</i-form>
                </div>
                </portlet>
            </i-col>
		</Row>
	</div>
</template>
<script>
	import userBar from '../finance/userBar.vue';
	import portlet from '../../components/portlet.vue';
	export default {
		components:{userBar,portlet},
		data(){
			return {
				formItem:{
					select:'PRO_CTCC_IDCARD',
					ID:'',
					phone:'',
					name:'',
					certificate:'',
					cID:''
				},
				columns1: [
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '身份证号',
                        key: 'idCardNo',
                        align: 'center'
                    },
                    {
                        title: '相似度',
                        key: 'similarity',
                        align: 'center'
                    },
                    {
                        title: '认证结果',
                        key: 'resCode',
                        align: 'center'
                    },
                    {
                        title: '认证状态描述',
                        key: 'message',
                        align: 'center'
                    },

                ],
                data1:[

                ],
			}
		},
		methods:{
			upload(){
                let files=document.querySelector('#photo').files[0];
                let myForm = new FormData();
                myForm.append("image",files);
                myForm.append("apiKey", '100104');
                myForm.append("nameList", this.formItem.name);
                myForm.append("idCardNoList", this.formItem.ID);
                this.$http.post(this.path+'pageQuery/pageQueryServlet/query',myForm).then((response)=>{
                	this.data1=[];
                    this.data1.push(response.body.result.ZRRAUTH_WITH_THREE);
                },(error)=>{
                    alert('上传失败,请重试!');
                });

            },
			getData(){
				var that = this;
				this.$http.jsonp(this.path+'pageQuery/pageQueryServlet/query',{
                    params:op,
                    jsonp:'callback'
                }).then(
                    (datas)=>{

                        if(datas.body.errorCode=='0000'){
                            that.data1.push(datas.body.result[ind]);
                        }else{
                            this.$Message.success(datas.body.msg);
                            if(datas.body.code=='997'||datas.body.code=='998'){
                            	this.myRouter.go({path:'/login'});
                            }
                        }
                    },
                    (error)=>{
                        this.$Message.success('网络问题!');
                    }
                );
			}

		}
	}
</script>
<style type="text/css">
	.data_body{
		min-height: 400px;
	}
	.data_body_choose{
		width: 400px;
	}
</style>